2025年9月8日日本語

国際化（i18n）のためのCSSカウンター様式を探り、グローバルオーディエンスのために異なる言語や文化的文脈で数字やリストをフォーマットする方法を学びます。

CSSカウンター様式言語サポート：グローバルオーディエンスのための国際化フォーマット

今日のようにグローバルに接続された世界では、ウェブ開発者は多様なオーディエンスに対応できるウェブサイトやアプリケーションを作成する必要があります。これは、言語だけでなく、異なる地域で使用される文化的な慣習や数字システムも考慮することを意味します。CSSカウンター様式は、これらの文化的なニュアンスを尊重する方法でリストやその他の番号付きコンテンツをフォーマットするための強力なメカニズムを提供します。この包括的なガイドでは、国際化（i18n）のためのCSSカウンター様式の機能を探り、それらを効果的に使用する方法をデモンストレーションします。

CSSカウンター様式の理解

CSSカウンターは、CSSルールによって維持される変数であり、使用された回数を追跡します。これらは主にリスト、見出し、その他の要素の番号付けに使用されます。CSSカウンター様式は、標準のアラビア数字やローマ数字を超えてカスタム番号システムを定義できるようにすることで、この機能を拡張します。これは、異なる言語や文化的な好みをサポートするために不可欠です。

カウンター様式を使用する際に含まれる主要なCSSプロパティは次のとおりです。

counter-reset: カウンターを特定の値に初期化またはリセットします。
counter-increment: カウンターの値をインクリメントします。
content: ::beforeまたは::after疑似要素と組み合わせて、カウンターの値を表示するために使用されます。
counter()またはcounters(): contentプロパティ内で、カウンターの値をフォーマットするために使用される関数です。
@counter-style: フォーマットを制御するさまざまなプロパティを持つカスタムカウンター様式を定義します。

@counter-styleの力

@counter-styleルールは、CSSカウンター様式の国際化の中心です。これは、カウンター値がどのようにレンダリングされるかを制御するさまざまなプロパティを持つカスタム番号システムを定義できるようにします。@counter-styleルールの主要なプロパティを見てみましょう。

system: カウンター表現を生成するために使用されるアルゴリズムを指定します。一般的な値には、cyclic、numeric、alphabetic、symbolic、fixed、additiveなどがあります。
symbols: 数字、文字、またはカスタム文字などのカウンター様式によって使用されるシンボルを定義します。
additive-symbols: additiveシステムと組み合わせて、シンボルとその対応する数値値を定義するために使用されます。
suffix: 各カウンター表現の後に追加されるテキストを指定します（例：ピリオドまたは閉じ括弧）。
prefix: 各カウンター表現の前に付加されるテキストを指定します。
range: カウンター様式が適用される値の範囲を制限します。
pad: 使用する最小桁数を指定し、必要に応じて先頭ゼロでパディングします。
speak-as: アクセシビリティのために、スクリーンリーダーによってカウンター値がどのようにアナウンスされるかを制御します。
fallback: 現在の様式がブラウザでサポートされていない場合に使用されるフォールバックカウンター様式を指定します。

@counter-styleを使用した国際化の例

それでは、@counter-styleを使用して、さまざまな言語や文化的な文脈でカウンターをフォーマットするいくつかの実用的な例を見てみましょう。

1.アラビア数字とアラビア・インディック数字

アラビア数字（0〜9）は広く使用されていますが、多くのアラビア語圏ではアラビア・インディック数字（٠‎-٩‎）を使用することが好まれます。これを実現するためのカウンター様式を作成できます。


@counter-style arabic-indic {
  system: numeric;
  symbols: '٠' '١' '٢' '٣' '٤' '٥' '٦' '٧' '٨' '٩';
  suffix: '. ';
}

ol {
  list-style: none;
  counter-reset: item;
}

ol li {
  counter-increment: item;
}

ol li::before {
  content: counter(item, arabic-indic);
}

このコードはarabic-indicという名前のカウンター様式を定義しており、アラビア・インディック数字をシンボルとして使用します。suffixプロパティは、各数字の後にピリオドとスペースを追加します。次に、CSSはこの様式を順序付きリスト（<ol>）に適用して、アラビア・インディック形式で数字を表示します。

2.ローマ数字（大文字と小文字）

ローマ数字はさまざまな文脈で一般的に使用されており、CSSカウンター様式はそれらを簡単に処理できます。


@counter-style upper-roman {
  system: upper-roman;
}

@counter-style lower-roman {
  system: lower-roman;
}

ol.upper-roman {
  list-style: none;
  counter-reset: item;
}

ol.upper-roman li {
  counter-increment: item;
}

ol.upper-roman li::before {
  content: counter(item, upper-roman) '. ';
}

ol.lower-roman {
  list-style: none;
  counter-reset: item;
}

ol.lower-roman li {
  counter-increment: item;
}

ol.lower-roman li::before {
  content: counter(item, lower-roman) '. ';
}

この例は、大文字（upper-roman）と小文字（lower-roman）のローマ数字カウンター様式を作成する方法を示しています。その後、CSSクラス（.upper-romanおよび.lower-roman）を使用して、これらの様式を異なるリストに適用できます。たとえば：


<ol class="upper-roman">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

<ol class="lower-roman">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

3.グルジア数字

グルジア数字は文字を使用した独特のシステムを使用しています。数字をグルジア語で表現するためのカウンター様式を定義できます。


@counter-style georgian {
  system: fixed;
  symbols: 'ა' 'ბ' 'გ' 'დ' 'ე' 'ვ' 'ზ' 'თ' 'ი' 'კ' 'ლ' 'მ' 'ნ' 'ო' 'პ' 'ჟ' 'რ' 'ს' 'ტ' 'უ' 'ფ' 'ქ' 'ღ' 'ყ' 'შ' 'ჩ' 'ც' 'ძ' 'წ' 'ჭ' 'ხ' 'ჯ' 'ჰ';
  suffix: '. ';
  range: 1 33;
}

ol.georgian {
  list-style: none;
  counter-reset: item;
}

ol.georgian li {
  counter-increment: item;
}

ol.georgian li::before {
  content: counter(item, georgian);
}

この例では、グルジアの数字システムに最初の33個の数字の限定されたセットのシンボルがあるため、fixedシステムを使用しています。rangeプロパティは、カウンター様式を1から33の値に制限します。33を超える数字の場合は、より複雑なロジックまたは別の番号システムを実装する必要があります。

4.アルメニア数字

グルジアと同様に、アルメニア数字も文字を使用して数字を表します。


@counter-style armenian {
  system: fixed;
  symbols: 'Ա' 'Բ' 'Գ' 'Դ' 'Ե' 'Զ' 'Է' 'Ը' 'Թ' 'Ժ' 'Ի' 'Լ' 'Խ' 'Ծ' 'Կ' 'Հ' 'Ձ' 'Ղ' 'Ճ' 'Մ' 'Յ' 'Ն' 'Շ' 'Ո' 'Չ' 'Պ' 'Ջ' 'Ռ' 'Ս' 'Վ' 'Տ' 'Ր' 'Ց' 'Ւ' 'Փ' 'Ք' 'Օ' 'Ֆ';
  suffix: '. ';
  range: 1 39;
}

ol.armenian {
  list-style: none;
  counter-reset: item;
}

ol.armenian li {
  counter-increment: item;
}

ol.armenian li::before {
  content: counter(item, armenian);
}

この例はグルジアの例に似ており、fixedシステムを使用し、アルメニア文字をシンボルとして定義しています。rangeは1〜39に設定されており、基本的なアルメニア数字セットをカバーしています。

5. CJK数字（中国語、日本語、韓国語）

CJK数字はより複雑で、フォーマルおよびインフォーマルな文脈で異なる形式があり、粒度のレベルも異なります。簡体字中国語を見てみましょう。


@counter-style simplified-chinese {
  system: numeric;
  symbols: '一' '二' '三' '四' '五' '六' '七' '八' '九';
  suffix: '';
}

@counter-style simplified-chinese-formal {
  system: fixed;
  symbols: '零' '壹' '贰' '叁' '肆' '伍' '陆' '柒' '捌' '玖';
  suffix: '';
}

ol.simplified-chinese {
  list-style: none;
  counter-reset: item;
}

ol.simplified-chinese li {
  counter-increment: item;
}

ol.simplified-chinese li::before {
  content: counter(item, simplified-chinese) '、';
}

ol.simplified-chinese-formal {
  list-style: none;
  counter-reset: item;
}

ol.simplified-chinese-formal li {
  counter-increment: item;
}

ol.simplified-chinese-formal li::before {
  content: counter(item, simplified-chinese-formal) '、';
}

これは簡略化された表現であることに注意してください。完全なCJK数字サポート、特に大きな数字の場合は、additiveシステムの使用と位（10、100、1000など）の処理を含む、より複雑な実装が必要になります。このコードは基本的な数字表現を示しています。

高度なテクニックと考慮事項

1.カウンター様式の組み合わせ

複数のカウンター様式を組み合わせて、より複雑な番号付けスキームを作成できます。たとえば、章のプライマリカウンターと、各章内のセクションのセカンダリカウンターを使用する場合があります。


body {
  counter-reset: chapter section;
}

h1 {
  counter-increment: chapter;
  counter-reset: section;
}

h2 {
  counter-increment: section;
}

h1::before {
  content: counter(chapter) '. ';
}

h2::before {
  content: counter(chapter) '.' counter(section) '. ';
}

このコードは階層的な番号付けシステムを作成し、章は連番で番号付けされ、セクションは各章内で番号付けされます（例：1.1、1.2、2.1、2.2）。

2.アクセシビリティの考慮事項

カウンター様式が障害を持つユーザーにアクセシブルであることを確認してください。speak-asプロパティを使用して、カウンター値がスクリーンリーダーによってどのようにアナウンスされるかを制御します。たとえば：


@counter-style my-style {
  system: numeric;
  symbols: '1' '2' '3';
  speak-as: numbers;
}

speak-as: numbers;プロパティは、スクリーンリーダーにカウンター値を数値としてアナウンスするように指示します。その他のオプションには、spell-out（数値をスペルアウトするため）とbullets（カウンターを箇条書きとしてアナウンスするため）があります。

さらに、カウンター様式で使用されているカスタムシンボルの代替テキストまたは説明を提供して、視覚障害のあるユーザーが番号付けされたコンテンツの意味を理解できるようにしてください。

3.ブラウザの互換性

CSSカウンター様式は最新のブラウザで広くサポートされていますが、古いブラウザバージョンを考慮することが重要です。fallbackプロパティを使用して、ブラウザがプライマリ様式をサポートしていない場合に使用されるフォールバックカウンター様式を指定します。たとえば：


@counter-style my-style {
  system: cyclic;
  symbols: '✓' '✗';
  fallback: disc;
}

この例では、ブラウザがcyclicシステムまたはカスタムシンボルをサポートしていない場合、discリスト様式にフォールバックします。

4.文化的な配慮

さまざまな言語や文化のカウンター様式を実装する際には、文化的な配慮に注意してください。各地域の適切な番号付け規則とシンボルを調査してください。不快または不適切な可能性のあるシンボルや形式の使用は避けてください。

たとえば、一部の文化では、数字システムに異なる句読点や区切り文字を使用することが好まれる場合があります。カウンター様式がこれらの好みを尊重することを確認してください。

実践的な応用とユースケース

CSSカウンター様式は、さまざまなウェブ開発シナリオで使用できます。

目次の生成：目次内の見出しと小見出しに自動的に番号を付けます。
番号付きリストの作成：さまざまな言語や様式で番号付きリストをフォーマットします。
チュートリアルのステップの番号付け：明確で視覚的に魅力的な番号付けで、ユーザーを一連のステップに導きます。
カスタムページネーションの実装：ユニークな番号付けスキームを持つカスタムページネーションコントロールを作成します。
ランキングリストの表示：さまざまなカウンター様式を使用して、ランキングを視覚的に魅力的な方法で表示します。
法的文書の生成：特定の番号付け要件を持つ法的文書をフォーマットします。
科学論文のフォーマット：適切な番号付けで、方程式、図、表を表示します。

CSSカウンター様式を使用するためのベストプラクティス

CSSカウンター様式が効果的で保守可能であることを確認するために、これらのベストプラクティスに従ってください。

カウンター様式にわかりやすい名前を使用する：様式の目的とフォーマットを明確に示す名前を選択します（例：arabic-indic、upper-roman、georgian）。
カウンター様式をモジュール化する：さまざまな言語や番号付けシステムごとに個別のカウンター様式を定義します。
CSSクラスを使用してカウンター様式を適用する：カウンター様式を要素に直接適用することは避け、代わりにCSSクラスを使用してフォーマットを制御します。
カウンター様式を徹底的にテストする：さまざまなブラウザやデバイスでカウンター様式をテストし、正しくレンダリングされることを確認します。
カウンター様式を文書化する：カウンター様式の目的、フォーマット、使用方法を含む明確な文書を提供します。
アクセシビリティを優先する：カウンター様式を作成する際には常にアクセシビリティを考慮し、speak-asプロパティを使用して、カウンター値がスクリーンリーダーによって正しくアナウンスされるようにします。

結論

CSSカウンター様式は、Web上の番号付けコンテンツのフォーマットを国際化するための強力で柔軟なメカニズムを提供します。@counter-styleルールとそのさまざまなプロパティを活用することで、さまざまな地域の文化的慣習や言語的なニュアンスを尊重するカスタム番号システムを作成できます。このガイドに概説されているベストプラクティスに従うことで、カウンター様式が効果的で、保守可能で、グローバルオーディエンスにアクセス可能であることを保証できます。ウェブ開発が進化し続けるにつれて、真に包括的でユーザーフレンドリーなウェブ体験を作成するために、国際化のためのCSSカウンター様式の理解と利用はますます重要になるでしょう。CSSカウンター様式の力を活用し、世界中のユーザーに響くウェブサイトを作成してください。